<template>
	<view :class="{'theme--Black':CurrentTheme.name==='DarkMode'}">
		<u-popup v-model="YModalShow"  mode="center" width="90%" border-radius="14" @close="popupCancel">
			<view class="popup_content">
				<text class="popup_content-title">{{title}}</text>
				<text class="popup_content-content">{{content}}</text>
				<view class="flex wid1p mt20">
					<view class="popup_content-btns" @click="popupCancel">{{cancelText}}</view>
					<view class="popup_content-btns-x"></view>
					<view class="popup_content-btns" @click="popupOk">{{submitText}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			'YModalShow': {
				type: Boolean,
				default: false
			},
			'title': {
				type: String,
				default: '提示'
			},
			'content':{
				type: String,
				default: '内容。。。'
			},
			'cancelText': {
				type: String,
				default: '取消'
			},
			'submitText': {
				type: String,
				default: '确定'
			}
		},
		name: "",
		data() {
			return {}
		},
		methods: {
			// 弹窗ok
			popupOk() {
				this.$emit("update:YModalShow", false)
				this.$emit("SubmitOk",{ClickState:'ok'})
			},
			popupCancel() {
				this.$emit("update:YModalShow", false)
				this.$emit("Cancel",{ClickState:'fail'})
			}
		}
	}
</script>

<style scoped lang="less">
	// 弹窗内容
	.popup_content {
		padding: 20rpx 0 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popup_content-title {
		// margin-top: 20rpx;
		border: none;
		font-size: 40rpx;
		font-weight: 600;
	}
	.popup_content-content{
		padding: 20rpx;
		font-size: 30rpx;
		text-align: center;
	}
	.popup_content-btns-x {
		height: 80rpx;
		width: 2rpx;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.popup_content-btns {
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.popup_content-btns:active {
		background-color: rgba(0, 0, 0, 0.1);
	}
</style>
